<template>
	<view style="background-color: #FFFFFF;" class="df-yc vwh">
		<!-- 导航栏 -->
		<view class="navbar w100" :style="{ background: bgcolor }">
			<cu-custom :isBack="true" :showBackIcon="true">
				<block slot="backText">
					<text class="nav-title shopro-selector-rect">查看称号</text>
				</block>
			</cu-custom>
		</view>
		<view class="swiper-card mt30">
			<swiper @change="swiperChange" :circular="true" :current="current" previous-margin="50rpx"
				next-margin="50rpx" :duration="1000">
				<swiper-item v-for="(item,index) in nameList" :key="index">
					<view class="swiper-item bs df-c">
						<view class="card bs bg-cover">
							<view class="bg">
								<image style="width: 100%;" :src="item.backImg" mode="widthFix"></image>
							</view>
							<view style="position: absolute;z-index: 10;left: 0;top: 0;" class="wh100 top df-y">
								<view class="df-xb">
									<view class="left df ai">
										<image style="height: 76rpx;" :src="item.image" mode="heightFix"></image>
										<view :style="{color:item.textColor}" class="df-c white medal-name fs22 shsc">
											{{item.name}}
										</view>
									</view>
									<view @click="jump('/pages/user/rules/rules',{type:'rich',richText:rules})"
										class="right df-c">
										<text style="color: rgba(255,255,255,0.5);" class="white mr10 fs24">规则说明</text>
										<image style="width: 28rpx;" :src="temImgUrl+'/wh.png'" mode="widthFix"></image>
									</view>
								</view>
								<view style="color: rgba(255,255,255,0.7);margin-top: auto;" class="fs22">
									{{item.des}}
								</view>
								<view v-if="userData.display" class="w100">
									<view class="white df-xb  w100 fs24">
										<view>贡献值 {{userData.devote}}<text
												style="color: rgba(255,255,255,0.5);">/{{nameList[userData.level-1].upgrade_rules}}</text>
										</view>
										<view style="color: rgba(255,255,255,0.5);">{{userData.msg}}</view>
									</view>
									<view class="progress mt20">
										<view
											:style="{width:(userData.devote/nameList[userData.level-1].upgrade_rules*100)+'%'}"
											class="active h100"></view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view style="margin-top:66rpx;" class="swiper-text wh100 df-yc">
			<text class="fs32 fb">称号权益</text>
			<swiper :circular="true" :current="current" :duration="0">
				<swiper-item @touchmove.stop='stopTouchMove' v-for="(item1,index2) in nameList" :key="index1">
					<scroll-view scroll-y="true">
						<view class="swiper-item">
							<view class="list wh100 df-yc">
								<view class="item df bs px30 ai wh100 mb20" v-for="(item2,index2) in item1.equity"
									:key="index2">
									<view class="icon mr30">
										<image style="width:40rpx;" :src="item2.icon" mode="widthFix"></image>
									</view>
									<text class="fs26">{{item2.name}}</text>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgcolor: "#ffffff",
				current: 0,
				nameList: [],
				userData: {},
				temImgUrl: this.$IMG_URL_TEMP,
				rules:""

			};
		},
		created() {
			this.getTitle()
			this.getRules()
		},
		methods: {
			swiperChange(e) {
				this.current = e.detail.current
			},
			stopTouchMove() {
				return true
			},
			//获取用户称号
			getTitle() {
				this.$api('user.checkname', {
					token: uni.getStorageSync('token')
				}).then(res => {
					this.nameList = res.data.agent_level
					this.userData = res.data.user_level
					this.current = res.data.user_level.level == 1 ? 0 : res.data.user_level.level - 1
				})
			},
			//获取用户称号说明
			getRules() {
				this.$api('user.checknamerule').then(res => {
					this.rules = res.data
				})
			},
			// 路由跳转
			jump(path, params) {
				this.$Router.push({
					path: path,
					query: params
				});
			}
		},
	}
</script>

<style lang="scss" scoped>
	.swiper-card {
		width: 100vw;
		height: 320rpx;
		border-radius: 20rpx;

		.swiper-item {}

		swiper {
			height: 100%;
		}

		.card {
			width: 630rpx;
			height: 320rpx;
			border-radius: 20rpx;
			overflow: hidden;
			position: relative;

			.bg {
				width: 100%;
				position: absolute;
			}

			.top {
				padding: 30rpx;
			}

			.progress {
				width: 570rpx;
				height: 8rpx;
				background: rgba($color: #000000, $alpha: 0.2);
				border-radius: 4rpx;
				overflow: hidden;
				position: relative;

				.active {
					position: absolute;
					background-color: #FFFFFF;
					border-radius: 4rpx;
				}
			}

		}
	}

	.swiper-text {
		swiper {
			width: 100%;
			height: 100%;
			margin-top: 50rpx;

			.item {
				width: 630rpx;
				height: 102rpx;
				background: rgba($color: #000000, $alpha: 0.05);
				border-radius: 50rpx;

				.icon {
					width: 40rpx;
					//background: linear-gradient(156deg, #201300, #432400);
				}
			}

			scroll-view {
				width: 100%;
				height: 100%;
			}
		}
	}

	.medal-name {
		padding: 0 16rpx;
		height: 45rpx;
		background: rgba($color: #ffffff, $alpha: 0.1);
		border-radius: 0px 20rpx 20rpx 0px;
		line-height: 45rpx;
		margin-left: -10rpx;
	}
</style>
